<template>
	<view class="container">
		<view class="header">
			<view class="header-nav">
				<view class="h2 active">学院新闻</view>
				<view class="h2 ">党建动态</view>
				<view class="h2 ">通知公告</view>
				<view class="h2 ">分院动态</view>
			</view>
			<view class="read-more">
				阅读更多
			</view>
		</view>
		<news-list :listdata="listdata"></news-list>
	</view>
</template>

<script lang="ts" setup>
	import ajax from "../util/request"
	import NewsList from "@/components/news/news-list.vue"
	import {
		reactive
	} from "vue";
	import {
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from "@dcloudio/uni-app";

	const listdata = reactive([])
	let page = 1;
	let end = false;
	// 下拉刷新
	onPullDownRefresh(function() {
		page = 1
		end = false;
		queryList()
	});
	onReachBottom(function() {
		page++;
		setTimeout(() => {
			queryList();
		}, 2000)


	});

	function queryList() {
		if (end) {
			return
		}
		ajax("content/queryList", {
			t_cat_plant_fk: 405,
			rows: 30,
			page
		}).then(({
			data
		}) => {
			// console.log(res);
			if (data.status > 0) {

				// 如果在第一页，重置
				if (page == 1) {
					listdata.length = 0
				}
				if (data.result_data.length < 30) {
					end = true
					uni.showToast({
						title: "数据加载完毕"
					})
				}
				listdata.push(...data.result_data)
				// 关闭下拉刷新动画
				uni.stopPullDownRefresh()
			}
		})

	}
	onShow(() => {
		uni.startPullDownRefresh({
		})
		uni.$on("opennews",function(name){
			console.log(name)
		})
	})
</script>

<style scoped>
	.container {
		padding: 10rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0rpx;
	}

	.header-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;


	}

	.h2 {
		margin-left: 16rpx;

	}

	.read-more {
		border: 1px dotted var(--base-color);
		border-radius: 5px;
		font-weight: 500;
		font-size: 80%;
		padding: 2px 3px;
		background-color: #fff;
		cursor: pointer;
		margin-right: 13rpx;
	}
</style>
